import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import {Layout, Menu,} from 'antd';
import {
    HomeOutlined,
    OrderedListOutlined,
    FormOutlined,
    DatabaseOutlined,
    FileImageOutlined,
    TagsOutlined,
    DeploymentUnitOutlined,
    AppleOutlined,
    CommentOutlined,
    DesktopOutlined
} from '@ant-design/icons';

const {Sider} = Layout;

class LeftNav extends Component {

    state = {
        collapsed: false,
    }

    change = (item) => {
        let {history} = this.props;
        let {key} = item;
        history.push(key);
    }


    onCollapse = collapsed => {
        this.setState({collapsed});
    };

    render() {
        const {collapsed} = this.state;
        let {pathname} = this.props.location;
        return (
            <Sider
                collapsible collapsed={collapsed} onCollapse={this.onCollapse}
                breakpoint="md"
                collapsedWidth="0"
            >
                <div className="logo">
                    <span><AppleOutlined/> Vivi 的博客后台</span>
                </div>
                <Menu theme="dark"
                      defaultSelectedKeys={pathname}
                      onSelect={this.change}
                      mode="inline">
                    <Menu.Item key="/admin/home" icon={<HomeOutlined/>}>
                        首页
                    </Menu.Item>
                    <Menu.Item key="/admin/blogList" icon={<OrderedListOutlined/>}>
                        博客列表
                    </Menu.Item>
                    <Menu.Item key="/admin/blogEdit" icon={<FormOutlined/>}>
                        博客编辑
                    </Menu.Item>
                    <Menu.Item key="/admin/types" icon={<DatabaseOutlined/>}>
                        分类管理
                    </Menu.Item>
                    <Menu.Item key="/admin/tags" icon={<TagsOutlined/>}>
                        标签管理
                    </Menu.Item>
                    <Menu.Item key="/admin/messages" icon={<CommentOutlined/>}>
                        留言管理
                    </Menu.Item>
                    <Menu.Item key="/admin/images" icon={<FileImageOutlined />}>
                        文件管理
                    </Menu.Item>
                    <Menu.Item key="/admin/friendLink" icon={<DeploymentUnitOutlined/>}>
                        友链管理
                    </Menu.Item>
                    <Menu.Item key="/admin/resources" icon={<DesktopOutlined />}>
                        网盘资源
                    </Menu.Item>
                </Menu>
            </Sider>
        );
    }
}

export default withRouter(LeftNav);
